<template>
	<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		@scroll="scroll">
		<view class="payment-bg">
			<view class="center-payment">
				<view class="image-item">
					<image src="/static/icons/u4418.png" mode=""></image>
				</view>
				<view class="wait-item">
					签约成功
				</view>
			</view>
		</view>

		<view class="user-info">
			<view class="info-container">
				<view class="user-title">
					<view class="left-image">
						<image src="/static/icons/u1469.png" mode=""></image>
					</view>
					<view class="right-text">
						<view class="top-name">{{useStore.userInfo?.name}}</view>
						<view class="button-age">
							<view style="margin-right: 20rpx;">{{useStore.userInfo?.gender==1?'男':'女'}}</view>
							<view>28岁</view>
						</view>
					</view>
					<view class="tag-title">
						<view class="already-sign">已签约</view>
					</view>
				</view>
				<view class="user-num">
					<view style="margin-right: 20rpx;">身份证号</view>
					<view>{{useStore.userInfo?.IDnumber}}</view>
				</view>
				<view class="user-tel">
					<view style="margin-right: 20rpx;">联系电话</view>
					<view>{{useStore.userInfo?.phone}}</view>
				</view>
				<view class="user-address">
					<view style="margin-right: 20rpx;">家庭住址</view>
					<view>成都市武侯区</view>
				</view>
			</view>
		</view>

		<view class="list-info">
			<view class="table-user-info">
				<view class="list-text">签约机构</view>
				<view class="info-text">成都市高新区卫生服务站</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">签约团队</view>
				<view class="info-text">{{signData?.signId?.teamId?.name}}</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">签约医生</view>
				<view class="info-text">李明明</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">服务包</view>
				<view class="info-text">中老年服务包</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">签约周期</view>
				<view class="info-text">1年</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">费用</view>
				<view class="info-text" style="color: red;">￥120</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">支付方式</view>
				<view class="info-text">微信</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">生效日期</view>
				<view class="info-text">{{signData.time}}</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">失效日期</view>
				<view class="info-text">2026-07-17 </view>
			</view>
			<view class="table-user-info">
				<view class="list-text">申请时间</view>
				<view class="info-text">{{signData.time}}</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">审核时间</view>
				<view class="info-text">{{signData.time}}</view>
			</view>
			<view class="table-user-info">
				<view class="list-text">签约备注</view>
				<view class="info-text"></view>
			</view>
		</view>
	</scroll-view>

	<view class="footer">
		<view class="quicky-payment" @click="toApply">申请续约</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useUserStore
	} from '../../../store/user';
	import {
		getSigningRecordApi
	} from '../../../api/sign';
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app';
	const useStore = useUserStore()
	// 获取到签约的记录
	const signData = ref({})
	onMounted(() => {
		getData()
	})
	const getData = () => {
		getSigningRecordApi({
				_id: '6874ae75fa7f9ee5dd89817a'
			})
			.then(res => {
				if (res.code == 200) {
					console.log(res.data[0]);
					signData.value = res.data[0]
				}
			})
	}
	const toApply = () => {
		uni.navigateTo({
			url: '/minePackage/pages/apply-sign/apply-sign'
		})
	}


	onShow(() => {

	})
</script>

<style scoped lang="scss">
	.scroll-Y {
		height: 1300rpx;
	}

	.payment-bg {
		width: 750rpx;
		height: 272rpx;
		background-color: #ffffff;
		overflow: hidden;
	}


	.wait-item {
		font-size: 40rpx;
		color: #333333;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.image-item {
		text-align: center;
		margin-top: 30rpx;
		// margin-bottom: 30rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.user-info {
		margin: 30rpx 32rpx;
		width: 670rpx;
		height: 352rpx;
		background-color: #2984f8;
		// margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.info-container {
		padding: 30rpx 30rpx;

	}

	.right-text {
		margin-left: 30rpx;
		margin-top: 20rpx;
	}

	.user-title {
		display: flex;
		position: relative;
	}

	.tag-title {
		width: 200rpx;
		height: 60rpx;
		clip-path: polygon(37% 0%, 76% 0%, 100% 100%, 0% 100%);
		position: absolute;
		left: 480rpx;
		top: -22rpx;
		transform: rotate(39deg);
		background-color: #F95E5A;
	}

	.already-sign {
		color: #ffffff;
		font-size: 24rpx;
		font-weight: 400;
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
		transform: rotate(0deg);
		position: absolute;
		left: 70rpx;
		top: 10rpx;
	}

	.left-image {
		image {
			width: 112rpx;
			height: 112rpx;
		}
	}

	.top-name {
		font-size: 40rpx;
		color: #ffffff;
	}

	.button-age {
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
	}

	.user-num,
	.user-tel,
	.user-address {
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
		margin: 20rpx 0;
	}

	.list-info {
		padding: 0 32rpx;
	}

	.table-user-info {
		width: 710rpx;
		height: 88rpx;
		border-bottom: 1rpx solid #e5e5e5;
		display: flex;
		align-items: center;
	}

	.list-text {
		width: 112rpx;
		height: 40rpx;
		// border: 1rpx solid #2984f8;
		font-size: 28rpx;
		color: #999999;

	}

	.info-text {
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;
	}

	.footer {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.quicky-payment {
		width: 670rpx;
		height: 88rpx;
		background-color: #2984f8;
		border-radius: 20rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #ffffff;
	}
</style>
<style>
	page {
		background-color: #f7fafd;
		/* 自定义颜色 */
	}
</style>